<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>商品管理</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" href="../js/jquery-easyui/themes/bootstrap/easyui.css">
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui/datagrid-detailview.js"></script>
    <script src="../js/jquery.form.js"></script>
    <script src="../js/jquery.serialize-object.js"></script>
    <script src="../../js/changeProduct.js"></script>
    <script charset="utf-8" src="../kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="../kindeditor/lang/zh-CN.js"></script>
    <script charset="utf-8" src="../kindeditor/plugins/code/prettify.js"></script>
    <script>
        var editor;
        KindEditor.ready(function(K) {
            //加载富文本编辑框
            var editor = K.create('textarea[name="content"]', {
                width : '100%',//宽度
                height: '700px', //高度
                cssPath : '../kindeditor/plugins/code/prettify.css',
                uploadJson : 'upFile', //上传图片
                fileManagerJson : 'upFile', //浏览图片
                allowFileManager : true, //true时显示浏览远程服务器按钮
                afterCreate : function() {
                    var self = this;
                    K.ctrl(document, 13, function() {
                        self.sync();
                        document.forms['example'].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function() {
                        self.sync();
                        document.forms['example'].submit();
                    });
                }
            });
            //点击修改商品描述按钮的时候获取商品描述内容
            K('input[name=changeBody]').click(function(e) {
                //获取商品ID
                var id = $('#id').val();
                $("#body").dialog("open").dialog("center").dialog("setTitle", "修改商品描述");
                $.ajax({
                    type: "POST",
                    url: "/getProduct",
                    data: {
                        id:id
                    },
                    dataType: "json",
                    success: function(data){
                        data = JSON.parse(data.data)
                        editor.html(data.data.productDetailed);
                    }
                });
            });
            //修改商品描述后提交表单
            K('input[name=submitBody]').click(function(e) {
                //获取商品ID
                var id = $('#id').val();
                $("#body").dialog("open").dialog("center").dialog("setTitle", "修改商品描述");
                $.ajax({
                    type: "POST",
                    url: "/changeProductBody",
                    data: {
                        id:id,
                        body:editor.html()
                    },
                    dataType: "json",
                    success: function(data){
                        if (data.code == 1){
                            $.messager.show({
                                title:'',
                                msg:'修改成功',
                                showType:'fade',
                                timeout: 1000,
                                style:{
                                    right:'',
                                    bottom:''
                                }
                            });
                            $('#body').dialog('close');
                            $("#listgrid").datagrid("reload");
                        }else{
                            $.messager.alert('修改失败');
                        }
                    }
                });
            });
            prettyPrint();
        });
    </script>
    <title>商品管理</title>
</head>
<body style="padding: 0;margin: 0;position:relative;">
<div style="height:100%;width:100%;" class="easyui-layout" fit='true'>
    <div  region="center" style="width:100%" class="easyui-layout"   title="商品管理" border="false">
        <div region='north' id="tb" style="width: 30%; height: 45px;" >
            <table style="margin-left:10px;float:left;height:45px;width: 100%;" cellspacing="0" border="0" >
                <tr >
                    <td>
                        <form id="search_form">
                            商品名称：<input name="sProductName" style="width:150px;" class="easyui-textbox" />
                            <a href="#" class="easyui-linkbutton search" iconCls="icon-search" onclick="query()">查询</a>
                            <a href="#" class="easyui-linkbutton edit" iconCls="icon-edit" onclick="update()">修改</a>
                            <a href="#" class="easyui-linkbutton edit" iconCls="icon-edit" onclick="delDate()">删除</a>
                        </form>
                    </td>
                </tr>
            </table>
        </div>
        <table region='center' style="height: auto;max-height: 100%" id="listgrid" class='easyui-datagrid'  iconCls="icon-edit" toolbar="#tb"
               data-options="
               url:'/getProductListByJson',
               fit:true,
               pagination:true,
               rownumbers:true,
               singleSelect:true,
               fitColumns:true,
               showFooter:true,
               columns:[[
                {field:'id',title:'编码',width:120},
                {field:'productName',title:'商品名称',width:120},
                {field:'productDescribe',title:'商品描述',width:500},
                {field:'productName_en',title:'商品名称(英文)',width:120},
                {field:'productDescribe_en',title:'商品描述(英文)',width:500},
                {field:'productType',title:'商品类型',width:500},
                {field:'seoTitle',title:'SEO标题',width:500},
                {field:'seoKeyword',title:'SEO关键字',width:500},
                {field:'seoDescs',title:'SEO描述',width:500}
        ]]
        "></table>
    </div>
</div>

<!-- 修改-->
<div id="edit_dialog" class="easyui-dialog"  closed="true" modal="true" style="width: 908px; padding: 10px;">
    <form name="example" id="example" method="post" action="addProduct">
        <table>
            <tr>
                <td><input class="easyui-textbox" name="id" id="id" style="width: 100%;" data-options="label:'编码:'" required="required" readonly="readonly"></td>
            </tr>
            <tr>
                <td>商品名称:<input class="easyui-textbox" type="text" name="productName" data-options="required:true" placeholder="商品名称" /></td>
            </tr>
            <tr>
                <td>商品名称(英文):<input class="easyui-textbox" type="text" name="productName_en" data-options="required:true" placeholder="商品名称" /></td>
            </tr>
            <tr>
                <td>
                    商品首图:<input type="text" name="code" id="code" data-options="required:true" placeholder="商品首图" readonly="readonly" />
                    <a href="#" class="easyui-linkbutton add" iconCls="icon-add" onclick="add1()">上传图片</a>
                    <script>
                        function add1(){
                            $("#imgBox").html("");
                            $("#add_dialog").dialog("open").dialog("center").dialog("setTitle", "上传图片");
                        }
                    </script>
                </td>
            </tr>
            <tr>
                <td>
                    商品分类:<input type="text" name="productType" id="productType" onclick="selectType()" readonly="readonly" />
                    <script>
                        function selectType() {
                            $("#edit_dialog_tree").dialog("open").dialog("center").dialog("setTitle", "选择分类");
                        }
                    </script>
                </td>
            </tr>
            <tr>
                <td>
                    商品描述:<input class="easyui-textbox" name="productDescribe" data-options="multiline:true" style="height:60px;width: 220px" />
                </td>
            </tr>
            <tr>
                <td>
                    商品描述(英文):<input class="easyui-textbox" name="productDescribe_en" data-options="multiline:true" style="height:60px;width: 220px" />
                </td>
            </tr>
            <tr>
                <td>
                    网页标题:<input class="easyui-textbox" type="text" name="seoTitle" data-options="required:true" placeholder="网页标题"  />
                </td>
            </tr>
            <tr>
                <td>
                    索引关键字:<input class="easyui-textbox" type="text" name="seoKeyword" data-options="required:true" placeholder="索引关键字"  />
                </td>
            </tr>
            <tr>
                <td>
                    索引描述:<input class="easyui-textbox" type="text" name="seoDescs" data-options="required:true" placeholder="索引描述"  />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" name="changeBody" value="修改描述信息" />
                </td>
            </tr>
            <!-- 富文本内容修改 单独提交 -->
            <div id="body" class="easyui-dialog" closed="true" modal="true" style="width: 908px; height:600px; padding: 10px;">
                <form name="example" id="body_form" method="post" action="addProduct">
                    <textarea id="content" name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>
                    <div style="text-align: center; padding-bottom: 10px;padding-top: 15px;">
                        <input type="button" name="submitBody" value="修改描述信息" />
                    </div>
                </form>
            </div>
        </table>
    </form>
    <!-- 树显示 -->
    <div id="edit_dialog_tree" class="easyui-dialog"  closed="true"
         modal="true" style="width: 450px; padding: 10px;">
        <div style="margin:20px 0;"></div>
        <div class="easyui-panel" style="padding:5px">
            <ul id="tt" class="easyui-tree"></ul>
            <script>
                $('#tt').tree({
                    url:'getTreeByJson',
                    animate: true,
                    onDblClick: function(node){
                        $("#productType").val(node.id + "-" + node.text);
                        $('#edit_dialog_tree').dialog('close');
                    },
                });
            </script>
        </div>
    </div>

    <!-- 查看图片 -->
    <div id="info_dialog" class="easyui-dialog"  closed="true"
         modal="true" style="width: 600px; padding: 10px;">
        <div class="main" style="overflow:auto;" >
        </div>
    </div>
    <div style="text-align: center; padding-bottom: 10px;padding-top: 15px;">
        <a href="javascript:void(0)" class="easyui-linkbutton"
           style="width: 80px; height: 30px" onclick="updateSubmit()">提交</a>
    </div>
</div>

<!-- 添加 -->
<div id="add_dialog" class="easyui-dialog"  closed="true" modal="true" style="width: 600px; padding: 10px;">
    <form  id="upBox" method="post" action="upImage">
        <div id="inputBox">
            <input type="file" name="file" title="请选择图片" id="file" multiple="multiple" accept="image/png,image/jpg,image/gif,image/JPEG"/>选择图片
        </div>
        <div id="imgBox">
        </div>
        <a href="#" class="easyui-linkbutton ok" iconCls="icon-add" id="btn">上传</a>
    </form>
</div>

<script type="text/javascript">
    //  查找
    function query(){
        $('#listgrid').datagrid('load',$('#search_form').serializeObject());
    }

    //打开修改框
    function update() {
        $("#example").form("clear");
        var row = $("#listgrid").datagrid("getSelected");
        if (row) {
            $("#edit_dialog").form("load", row);
            $("#edit_dialog").dialog("open").dialog("center").dialog("setTitle", "修改");
        } else {
            $.messager.show({
                title:'',
                msg:'请选择要修改的记录行',
                showType:'fade',
                timeout: 1000,
                style:{
                    right:'',
                    bottom:''
                }
            });
        }
    }

    //修改提交
    function updateSubmit(){
        $.messager.progress();
        $('#example').form(
            'submit',{
                url:"/changeProduct",
                onSubmit:function(){
                    var isValid = $(this).form('validate');
                    if (!isValid){
                        $.messager.progress('close');
                    }
                    return isValid;
                },
                success:function(result){
                    data = JSON.parse(result);
                    $.messager.progress('close');
                    if (data.code == 1){
                        $.messager.show({
                            title:'',
                            msg:'修改成功',
                            showType:'fade',
                            timeout: 1000,
                            style:{
                                right:'',
                                bottom:''
                            }
                        });
                        $('#edit_dialog').dialog('close');
                        $("#listgrid").datagrid("reload");
                    }else{
                        $.messager.alert('修改失败');
                    }
                }
            });
    }
    imgUpload({
        inputId:'file', //input框id
        imgBox:'imgBox', //图片容器id
        buttonId:'btn', //提交按钮id
        upUrl:'/upImage',  //提交地址
        data:'image', //参数名
        num:"5"//最多上传图片个数
    })

    function delDate() {
        $("#edit_form").form("clear");
        var row = $("#listgrid").datagrid("getSelected");
        if (row) {
            $.ajax({
                type: "post",
                url: "delProduct",
                async: true,
                data: {
                    id:row.id
                },
                success: function(data) {
                    data = JSON.parse(data);
                    if(data.code == 1){
                        $.messager.show({
                            title:'',
                            msg:data.msg,
                            showType:'fade',
                            timeout: 1500,
                            style:{
                                right:'',
                                bottom:''
                            }
                        });
                        //$('#code').attr("value", data.url);
                        $('#add_dialog').dialog('close');
                        $("#listgrid").datagrid('options').url= '/getProductListByJson';
                        $('#listgrid').datagrid('load');
                    } else {
                        alert("删除失败，请联系开发");
                    }
                }
            });
        } else {
            $.messager.show({
                title:'',
                msg:'请选择要修改的记录行',
                showType:'fade',
                timeout: 1000,
                style:{
                    right:'',
                    bottom:''
                }
            });
        }
    }
</script>
</body>
</html>